<template>
	<view class="fileinfo">
		<template v-if="canEdit">
			<view class="submeida">
				<view class="medialine">
					<view class="mediaarea">
						<view class="mediaitem file" @click="btnclick('file')"></view>
					</view>
					<view class="mediatext">{{$t('baseCommon.buttons.selectFile')}}</view>
				</view>
				<view class="medialine">
					<view class="mediaarea">
						<view class="mediaitem photo" @click="btnclick('camera')"></view>
					</view>
					<view class="mediatext">{{$t('baseCommon.buttons.photosVideos')}}</view>
				</view>
				<view class="medialine">
					<view class="mediaarea">
						<view class="mediaitem audio" @click="btnclick('audio')"></view>
					</view>
					<view class="mediatext">{{$t('baseCommon.buttons.recording')}}</view>
				</view>
			</view>
			
			<view class="divide"></view>
			
			<view class="label">
				<view class="label-mark"></view>
				<text>{{$t('baseCommon.other.attachInfo')}}</text>
			</view>
		</template>

		<view>
			<file-list :files="files" :canEdit="canEdit" :collectionId="collectionId" @reload="init"></file-list>
		</view>
	</view>
</template>

<script>
	import FileList from "./file-list.vue"
	import { getCollectionId, getFileByCollId } from '@/api/base/file.js'
	import { file } from '@/utils/common.js'

	export default {
		props: {
			attachFile: {
				type: String,
				default: ''
			},
			canEdit: {
				type: Boolean,
				default: false
			},
			businessCode: {
				type: String,
				default: ''
			},
			subBusinessCode: {
				type: String,
				default: ''
			},
			businessDataCode: {
				type: String,
				default: ''
			},
			sourceData: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		components: {
			FileList
		},
		data() {
			return {
				collectionId: '',
				files: []
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				if(this.attachFile) {
					this.collectionId = this.attachFile
					getFileByCollId(this.attachFile).then(res => {
						this.files = res.data
					})
				} else {
					getCollectionId().then(res => {
						this.collectionId = res.data
					})
				}
			},
			btnclick(type) {
				const _this = this
				if (type == "file") {
					uni.chooseImage({
					    sizeType: ['original'],
					    sourceType: ['album'],
					    success: function (res) {
							let images = res.tempFilePaths
							for(var i in images) {
								_this.uploadFile(images[i])
								// file.compressImage(images[i], 50, imgUrl => {
								// 	_this.uploadFile(imgUrl)
								// })
							}
					    }
					});
				} else if (type == "camera") {
					// #ifdef APP-PLUS
					const camera = plus.camera.getCamera();
					// #endif
					uni.showActionSheet({
						itemList: [_this.$t('baseCommon.buttons.photo'), _this.$t('baseCommon.buttons.video')],
						success: function(res) {
							if (res.tapIndex === 0) { //拍照
								var resolution = camera.supportedImageResolutions[0];
								var format = camera.supportedImageFormats[0];
								camera.captureImage(function(path) {
									file.compressImage(path, 50, imgUrl => {
										_this.uploadFile(imgUrl)
									})
								}, function(error) {
									console.log("Capture image failed: " + error.message);
								}, {
									resolution: resolution,
									format: format
								});
							} else { //录像
								var resolution = camera.supportedVideoResolutions[0];
								var format = camera.supportedVideoFormats[0];
								camera.startVideoCapture(function(path) {
									file.compressVideo(path, url => {
										_this.uploadFile(url)
									})
								}, function(error) {
									console.log("Capture video failed: " + error.message);
								}, {
									resolution: resolution,
									format: format
								});
							}
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});
				} else if (type == "audio") {
					let _this = this
					uni.navigateTo({
						url: "/pages/base/voice",
						events: {
							uploadVoice(data) {
								_this.uploadFile(data)
							}
						}
					})
				}
			},
			async uploadFile(item) {
				let formData = {
					collectionId: this.collectionId,
					businessCode: this.businessCode,
					subBusinessCode: this.subBusinessCode,
					businessDataCode: this.businessDataCode,
					fileSum: 1,
					userName: uni.getStorageSync("userName"),
					fileUserName: uni.getStorageSync("userName")
				}
				
				const _this = this
				file.uploadFileset(item, formData).then(res => {
					const addFile = {
						"fileId": res.attachmentExtendPo.id,
						"fileName": res.attachmentExtendPo.fileName,
						"ext": res.attachmentExtendPo.ext,
						"fileType": file.getFileType(res.attachmentExtendPo),
						"fileSize": res.attachmentExtendPo.totalBytes
					}
					
					if(!_this.files.find(r=>r.fileId === addFile.fileId)) {
						_this.files.push(addFile)
					}
					_this.$emit('fileSet', res.collectionId, _this.sourceData)
				})
			}
		}
	}
</script>

<style>
	.fileinfo {
		background-color: #FFFFFF;
	}

	.submeida {
		width: 100%;
		display: flex;
	}

	.medialine {
		flex: 1;
		text-align: center;
	}

	.mediaarea {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #EFEFEF;
		margin: 0 auto;
		padding: 10px;
	}
	
	.mediaitem {
		width: 30px;
		height: 30px;
		padding: 5px;
	}
	
	.mediatext {
		font-size: 14px;
		color: #333333;
		padding-top: 8px;
	}
	
	.file {
		background: url(../../static/images/icon/folder.png) no-repeat center center;
		background-size: 100% 100%;
	}

	.photo {
		background: url(../../static/images/icon/camera.png);
		background-size: 100% 100%;
	}

	.audio {
		background: url(../../static/images/icon/microphone.png);
		background-size: 100% 100%;
	}

	.divide {
		border-top: solid 1px #EFEFEF;
		margin: 12px 0;
	}
	
	.label {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		
		.label-mark {
			width: 5px;
			height: 20px;
			margin: 2px 4px;
			background-color: #1E91E6;
		}
	}
</style>
